<script setup lang="ts">
  import BasicHeader from '@/components/BasicHeader/index.vue';
  import { router } from '@/utils/router';
  import BtnTool from '@/components/Tools/btnTool.vue';
  import { PATH_COLLECTIONS } from '@/enums/routerEnum';
  import { allActivity } from '@/services/api/activity';
  import { onMounted, ref, unref } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { useAuthStore } from '@/state/modules/auth';

  // type CombinModel

  onMounted(async () => {
    const param = {
      pageSize: 10,
      pageIndex: 1,
    };
    const rows = await allActivity(param);
    listData.value = rows.data;
  });

  let listData = ref<any[]>([]);
  const user = ref(useAuthStore().getUser as UserModel);
  console.log('user: ', user);
  const backPage = () => {
    return router.back();
  };

  // 跳转创建
  const create = (item?: ActivityUsersModel) => {
    const params = { id: item ? item.id : null, type: 'edit' };
    router.push(PATH_COLLECTIONS.PUTACTIVITY, params);
  };
  // 查看详情
  const detail = (item: ActivityModel) => {
    router.push(PATH_COLLECTIONS.PUTACTIVITY, { id: item.id, type: 'join' });
  };

  const handlePics = (str: string): Array<string> => {
    return str.split(',');
  };

  const handleAvatar = (item: ActivityModel) => {
    return item.join_list ?? '' ? item.join_list.split(',') : [];
  };
</script>
<template>
  <view class="container">
    <!-- #ifdef H5 | MP-WEIXIN -->
    <BtnTool :tapCallback="create" title="新增"></BtnTool>
    <!-- endif -->

    <view class="picBox">
      <view class="cu-bar">
        <view class="action sub-title justify-between">
          <text class="text-xl text-bold text-white">摄影师精选作品</text>
          <text class="text-ABC text-white">selected</text>
          <!-- last-child选择器-->
        </view>
        <view class="action text-white text-sm" style="opacity: 0.6"> 2022-02-29 更新 </view>
      </view>

      <view class="picMain flex justify-between">
        <view class="picL">
          <image src="https://www.zhoukaiwen.com/img/qh/wxt1.jpg" mode="aspectFill"></image>
        </view>
        <view class="picB">
          <image src="https://www.zhoukaiwen.com/img/qh/kw1.jpg" mode="aspectFill"></image>
          <image src="https://www.zhoukaiwen.com/img/qh/kw2.jpg" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <view class="title-header">
      <view class="title-text"> 活 / 动 / 列 / 表 </view>
    </view>

    <view class="cu-card dynamic isCard">
      <view class="cu-item shadow" v-for="item in listData" :key="item.id">
        <view class="PhotographerBoxL">
          <u-avatar :src="item.users.avatar" size="60" shape="square"></u-avatar>
          <view class="text-xl margin-top-sm">{{ item.users.nickname || '匿名**' }}</view>
          <view class="cu-tag2 margin-top-xs bg-blue radius">{{
            item.gender == 1 ? '女' : '男'
          }}</view>
          <view class="text-xs margin-top-sm text-grey">{{ item.users.description }}</view>
        </view>
        <view class="PhotographerBoxR">
          <!-- <div class="icon-oprate">
            <u-icon name="trash-fill" color="#e54d42" @click="remove(item)"></u-icon>
          </div> -->
          <view class="album">
            <view class="album__content">
              <u-text :text="item.title" type="primary" bold size="17"></u-text>
              <u-text
                margin="0 0 8px 0"
                :size="12"
                mode="text"
                lineHeight="14"
                lines="5"
                :text="item.mark"
              ></u-text>
              <u-album :urls="handlePics(item.picture)"></u-album>
              <div class="avatar-group mt-1">
                <u-avatar-group :urls="handleAvatar(item)" size="20" gap="0.4"></u-avatar-group>
                <div class="description text-xs text-gray"
                  >{{ handleAvatar(item).length }}人已参加</div
                >
              </div>
            </view>
          </view>
        </view>
        <div class="optPhotographer">
          <view
            class="padding-sm text-center text-bold text-blue goPhotographer"
            @tap="detail(item)"
            >查看详情</view
          >
          <view
            v-if="item.master_id == user?.id"
            class="padding-sm text-center text-bold text-blue goPhotographer"
            @tap="create(item)"
            >修改活动</view
          >
        </div>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .picBox {
    width: 750rpx;
    background-color: #1a1a1a;

    .picMain {
      width: 750rpx;
      height: 380rpx;
      padding: 10rpx 30rpx 30rpx 30rpx;

      .picL {
        width: 430rpx;
        height: 100%;

        image {
          border-radius: 8rpx;
          width: 100%;
          height: 100%;
        }
      }

      .picB {
        width: 250rpx;
        height: 100%;
        display: flex;
        flex-flow: column; //垂直排列
        justify-content: space-between; //两端对齐

        image {
          border-radius: 8rpx;
          width: 100%;
          height: 48%;
        }
      }
    }
  }

  .title-header {
    display: flex;
    height: 120rpx;
    font-size: 40rpx;
    align-items: center;
    justify-content: center;
    /* padding: 40rpx 0 0 0; */
    font-weight: bold;
    background-image: url(https://s1.ax1x.com/2020/09/16/wccswF.png);
    background-size: cover;
  }

  .title-text {
    background-image: -webkit-linear-gradient(0deg, #ff8a34, #fbbd12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .cu-card > .cu-item {
    margin: 0 30rpx 30rpx 30rpx;
    display: flex;
    flex-flow: row wrap;
  }

  .PhotographerBoxL {
    width: 30%;
    text-align: center;
    padding: 24rpx;
  }

  .PhotographerBoxR {
    width: 70%;
    padding: 25rpx 12rpx;

    .PhotoPpl {
      width: 100%;

      image {
        border-radius: 8rpx;
        width: 128rpx;
        height: 128rpx;
      }
    }
  }

  .cu-tag2 {
    height: 40rpx !important;
    font-size: 22rpx;
    vertical-align: middle;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0rpx 16rpx;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    white-space: nowrap;
  }

  .optPhotographer {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
  }
  .goPhotographer {
    margin: 0 2%;
    border-top: 1rpx #cccccc dashed;
  }

  .PhotographerBoxL {
    :deep(.u-avatar) {
      margin: 0 auto;
    }
  }
  .album {
    @include flex;
    align-items: flex-start;

    &__avatar {
      background-color: $u-bg-color;
      padding: 5px;
      border-radius: 3px;
    }

    &__content {
      margin-left: 10px;
      width: 100%;
      flex: 1;
    }
  }
</style>
